

<template>
<h2>理财列表显示</h2>
理财项目名称
<input type="text" v-model="Chaxun.FinaName">
利率
<select v-model="Chaxun.LixiId">
    <option value="0">请选择</option>
    <option value="1">9%</option>
    <option value="2">10%</option>
    <option value="3">8%</option>
</select>

<input  type="button" value="查询" @click="Show()">
<table class="table table-bordered">
<thead>
    <tr>
        <th>理财编号</th>
        <th>理财名称</th>
        <th>年收益</th>
        <th>利息</th>
        <th>最低金额</th>
        <th>理财人数</th>
    </tr>
</thead>
<tbody>
    <tr v-for="item in Info">
        <td>{{ item.FinaId }}</td>
        <td>{{ item.FinaName }}</td>
        <td>{{ item.YeraMoney }}CNY</td>
        <td>{{ item.LixiInfo }}%</td>
        <td>{{ item.MinMoney }}CNY</td>
        <td>{{ item.FinaNum }}</td>
    </tr>
</tbody>
</table>
<span>
    当前为{{ page.totalCount }}条数据，每页显示{{ page.PageSize }}条数据，共{{ page.pageCount }}页，
    当前为第{{ page.PageIndex }}/{{page.pageCount}}页
</span>
<span>
    <a href="#" @click="pageTz(1)" style="margin-left: 5px;">首页</a>
    <a href="#" @click="pageTz(page.PageIndex-1)" style="margin-left: 5px;">上一页</a>
    <a href="#" @click="pageTz(page.PageIndex+1)" style="margin-left: 5px;">下一页</a>
    <a href="#" @click="pageTz(page.pageCount)" style="margin-left: 5px;">尾页</a>
</span>
<span>
   <input type="text" style="width: 50px;" v-model="NumTZ"/>
<input type="button"  value="跳转" @click="Tiaozhuan(NumTZ)">
</span>




</template>
<script setup lang="ts">
import { ref ,onMounted} from 'vue'
import axios from 'axios'
const NumTZ = ref(0);
//创建响应式数据
const Info = ref([{
    FinaId:0,
    FinaName:'',
    YeraMoney:'',
    LixiInfo:0,
    MinMoney:0,
    FinaNum:0,

}])
//指定页面跳转
const Tiaozhuan = (NumTZ:number)=>{
    if(NumTZ>=1 && NumTZ<=page.pageCount){
        page.PageIndex = NumTZ;
        Show();
    }else{
        alert("页面显示错误!")
    }

}
onMounted(()=>{
Show();
})
//创建查询响应式数据
const Chaxun = ref ({
    FinaName:'',
    LixiId:0
})
//创建分页响应式数据
const page = ({
    PageIndex:1,
    PageSize:2,
    totalCount:0,
    pageCount:0

})
//创建分页功能
const pageTz = (i:number)=>{
    if(i>=1 && i<=page.pageCount){
        page.PageIndex = i;
        Show();
    }else{
        alert("页面显示错误!")
    }

} 
const Show = () => {
        axios.get("http://localhost:61413/api/Fina/FinaShow",{
            params:{
                FinaName:Chaxun.value.FinaName,
                LixiId:Chaxun.value.LixiId,
                pageSize:page.PageSize,
                pageindex:page.PageIndex
            }
        })
        .then((res)=>{
            Info.value = res.data.Res
            page.totalCount = res.data.totalCount;
            page.pageCount = res.data.pageCount;
        })
        .catch((err)=>{
            console.log(err);
        })
} 

</script>